<template>
    <div class="userfeedback">
        <div class="feedback-item">
            <div class="feedback-item-label">用户名：</div>
            <div class="feedback-item-content">{{ username }}</div>
        </div>

        <div class="feedback-item">
            <div class="feedback-item-label">满意度：</div>
            <div class="feedback-item-content">
                <el-rate v-model="star" @change="handleChangeRate"></el-rate>
            </div>
        </div>

        <div class="feedback-item">
            <div class="feedback-item-label">留言：</div>
            <div class="feedback-item-content">
                <el-input
                    type="textarea"
                    :rows="10"
                    placeholder="请输入内容"
                    v-model="content"
                >
                </el-input>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
    </div>
</template>

<script>
import { userFeedback } from "../../api";

export default {
    name: "UserFeedback",
    data() {
        return {
            star: 0,
            content: "",
            username: "",
        };
    },

    methods: {
        handleChangeRate(e) {
            this.star = e;
        },

        async handleSubmit() {
            try {
                const res = await userFeedback("/feedback/save", {
                    star: this.star,
                    content: this.content,
                });
                if (res.data.code === 0) {
                    this.$message({
                        type: "success",
                        message: "提交反馈成功",
                    });

                    this.star = null;
                    this.content = "";
                }
            } catch (err) {
                this.$message.error(err);
            }
        },
    },

    mounted() {
        this.username = JSON.parse(localStorage.getItem("userinfo")).username;
    },
};
</script>

<style lang="less">
.userfeedback {
    padding: 20px;

    .feedback-item {
        display: flex;
        margin-bottom: 40px;
        font-size: 18px;

        &-label {
            font-weight: 600;
            width: 100px;
            text-align: right;
        }

        &-content {
            width: 600px;
            margin-left: 20px;
        }
    }

    .btn {
        width: 720px;
        display: flex;
        justify-content: flex-end;
    }
}
</style>
